import { Image, Text, View } from "@tarojs/components"
import { AtIcon } from "taro-ui"
import { RecoData } from "../../index/models"
import "../searchList.scss"

interface HotSearchListProps{
  data:RecoData[]
}

const levelMaps = new Map([
  ["0","简单"],
  ["1","一般"],
  ["2","困难"],
  ["3","复杂"]
])


export const HotSearchList = ({
  data
}:HotSearchListProps) => {
  return(
    <>
      <View className="hot-list-container">
        {
          data.map((item)=>(
            <View className="item" key={item.id}>
              <Image
                className="hot-list--image"
                mode="aspectFill"
                src={item.cover_image}
              />
              <View className="hot-list--info">
                <Text className="info-name">{item.name}</Text>
                <View className="info-date">
                    <View className="flex cost">
                      <AtIcon prefixClass="icon" value='naifen' size='21'/>
                      <Text>{Math.floor(Number(item.cost) / 60)}分钟</Text>
                    </View>
                    <View className="flex level">
                      <AtIcon prefixClass="icon" value='cookie' size='21'/>
                      <Text>{levelMaps.get(item.level)}</Text>
                    </View>
                </View>
              </View>
            </View>
          ))
        }
      </View>
    </>
  )
}
